<!--
 * @Author      : ZhouQiJun
 * @Date        : 2025-08-12 10:34:28
 * @LastEditors : ZhouQiJun
 * @LastEditTime: 2025-08-15 01:45:48
 * @Description : 遮罩
-->
<script setup lang="ts">
import { watch } from 'vue'

import { setupMask, useMap } from 'ol-vue-hooks'

//import { getGis } from '@ol/api'

//import createMask from './createMask'
import { baseLayers, guiYang, guiZhouWKT } from './testData'

const gisKey = 'TheUseMask'
const { setTarget, gis, inited } = useMap(
  {
    center: guiYang as [number, number],
    //地图初始显示级别
    zoom: 10,
    projection: 'EPSG:4326',
    // minZoom: 1,
    // maxZoom: 20,
  },
  baseLayers[0],
  gisKey,
)

//const { mask, feat } = createMask(guiZhouWKT)
//watch(inited, (mapInited) => {
//  console.log({ mapInited })
//  const map = getGis('TheUseMask').map
//  const baseLayers = map.getAllLayers().filter((e) => e.get('basemap') === true)
//  console.log({ baseLayers })
//  baseLayers.forEach((l) => {
//    const chain = getPrototypeChain(l)
//    console.log({ l, chain })
//    //const layerName = l.getSource()?.getLayer?.()
//    l.addFilter(mask)
//  })
//  const geo = feat.getGeometry()
//  map?.getView().fit(geo)
//})

watch(inited, (mapInited) => {
  console.log({ mapInited })
  if (!mapInited) return
  setupMask(guiZhouWKT, {}, gisKey)
})

function getPrototypeChain(obj) {
  const chain = []
  let current = obj

  while (current !== null) {
    chain.push(current)
    current = Object.getPrototypeOf(current)
  }

  return chain
}
</script>

<template>
  <div class="h-full w-full TheUseMask">
    <div class="map-container" :ref="setTarget"></div>
  </div>
</template>

<style lang="scss">
.map-container {
  width: 100%;
  height: 85%;
}
</style>
